<template>
  <!-- 内容区域 -->
  <el-dialog
    title="添加站点类型"
    :lock-scroll="false"
    close-on-press-escape
    :visible="dialogAdd"
    v-dialogDrag
    @close="closedialog"
    :close-on-click-modal="false"
  >
    <div class="add_new_site">
      <div>
        <el-tabs
          class="tabHight"
          :tab-position="tabPosition"
          v-model="siteTabs"
        >
          <el-tab-pane label="详情" name="first">
            <!-- from表单 -->
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              class="tabHight_auto"
              label-width="auto"
              size="mini"
            >
              <el-form-item label="Token:" prop="token">
                <el-input
                  v-model="ruleForm.token"
                  placeholder="请输入2-30字符标识符"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="名称:" prop="name">
                <el-input
                  v-model="ruleForm.name"
                  placeholder="请输入15字符以内名称"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="图像:" prop="imageUrl">
                <div style="width: 100%">
                  <el-row>
                    <el-col :span="6">
                      <app-upload
                        tips=""
                        :is-resolution="true"
                        :width="720"
                        :height="294"
                        @subUploadSucceed="handleUploadSucceed"
                      />
                    </el-col>
                    <el-col :span="18">
                      <div class="imageHome" v-if="showImg">
                        <img
                          v-if="ruleForm.imageUrl"
                          :src="ruleForm.imageUrl | filtersFileUrl()"
                          class="image-size"
                        />
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-form-item>
              <el-form-item label="描述:" prop="description">
                <el-input
                  type="textarea"
                  v-model="ruleForm.description"
                  placeholder="请输入描述"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <!-- 涵盖 -->
          <!-- <el-tab-pane label="含盖" name="second">
          <coverDatatab
            :editcoverData.sync="editcoverData"
            @sendselectedids="sendids"
          />
        </el-tab-pane> -->
          <!-- 元数据样式 -->
          <el-tab-pane label="元数据" name="third">
            <metaData
              :editmetaData="editmetaData"
              :isedit="isedit"
              @sendmetaDatas="sendmetaData"
            />
          </el-tab-pane>
        </el-tabs>
        <!-- <div slot="footer">
          <el-button @click="dialogFormVisible" size="mini">取 消</el-button>
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            size="mini"
            class="btnColor"
            >确定</el-button
          >
        </div> -->
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible" size="mini">取 消</el-button>
      <el-button
        :loading="btnLoding"
        type="primary"
        @click="submitForm('ruleForm')"
        size="mini"
        class="btnColor"
        >确定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
// import CoverDatatab from "./coverDatatab.vue";
import MetaData from "./metaData.vue";
import AppUpload from "../device/devicegroups/UploadImage.vue";
import "../../styles/uploadImg.sass";
import { addAreasType } from "@/api/superlinkAreat";
import { TOKEN_RULES } from "@/utils/local";
export default {
  components: {
    // CoverDatatab,
    MetaData,
    AppUpload,
  },
  props: {
    dialogAdd: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      tabPosition: "left",
      isedit: false, //true为编辑页进入，false为添加页进入
      // dialogFormVisible: false,
      btnLoding: false,
      siteTabs: "first",
      ruleForm: {
        token: "",
        name: "",
        description: "",
        imageUrl: "",
      },
      coverData: [],
      metaData: [],
      editcoverData: [],
      editmetaData: [],
      formInline: { date: "", name: "" },
      rules: {
        token: TOKEN_RULES,
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 2, max: 15, message: "输入格式不正确", trigger: "blur" },
        ],
        imageUrl: [{ required: true, message: "请上传图片", trigger: "blur" }],
      },
      areaList: [],
      coverDataSelectedIds: [],
      metaDataJson: {},
    };
  },
  mounted() {},
  computed: {
    showImg: function () {
      return this.ruleForm.imageUrl != "";
    },
  },
  methods: {
    // 图片上传
    handleUploadSucceed(url) {
      this.ruleForm.imageUrl = url;
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    closedialog() {
      this.$emit("closedialog", false);
    },
    dialogFormVisible() {
      this.closedialog();
      this.ruleForm = {
        token: "",
        name: "",
        description: "",
        imageUrl: "",
      };
      this.formInline = { date: "", name: "" };
      this.metaData = [];
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let formData = {};
          formData = Object.assign({}, this.ruleForm);
          formData.containedAreaTypeTokens = this.coverDataSelectedIds;
          formData.metadata = this.metaDataJson;
          this.btnLoding = true;
          addAreasType(formData)
            .then((res) => {
              this.$msg({
                type: "success",
                message: "操作成功!",
              });
              this.$emit("submitF", false);
            })
            .finally((f) => {
              this.btnLoding = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //含盖页回传
    sendids(ids) {
      this.coverDataSelectedIds = ids;
    },

    //元数据页回传
    sendmetaData(md) {
      this.metaDataJson = md;
    },
  },
};
</script>
<style scoped lang='scss'>
.add_new_site /deep/ .el-dialog__body {
  /* padding: 0px; */
}
.add_new_site /deep/ .el-main {
  padding: 20px;
}
.el-row {
  margin-top: 0px;
}
/deep/ .el-card__body {
  /* padding: 0; */
}
.demo-form-inline {
  margin-top: 10px;
}
.avatar {
  text-align: center;
  margin-top: 12px;
}
.name {
  margin-top: 13px;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
}
.text {
  font-size: 14px;
  margin-top: 11px;
  text-align: center;
  /* width: 100px; */
}
.element-icons {
  font-size: 20px;
  font-weight: 600;
  float: left;
  /* position: absolute; */
  margin-top: -91px;
  margin-left: 91%;
}
.el-pagination {
  margin-left: 32%;
  margin-top: 30px;
}

.list-content {
  margin-top: -25px;
}

.span-box {
  display: inline-block;
  position: relative;
}
.ico-pre {
  position: absolute;
  left: -21px;
  top: 12px;
}
/* .span-box i {
  color: #051522;
  margin-right: 5px;
  font-size: 16px;
  line-height: 0px;
} */
</style>
